async function fetchCourses() {
    const response = await fetch('http://39.108.212.68:6003/courses');
    const data = await response.json();
    return data.result || [];
}

function getRandomCourses(courses, num = 6) {
    const shuffled = courses.sort(() => 0.5 - Math.random());
    return shuffled.slice(0, num);
}

function displayCourses(courses) {
    const container = document.getElementById('course-container');
    container.innerHTML = '';
    courses.forEach(course => {
        const courseElement = document.createElement('div');
        courseElement.classList.add('course');
        courseElement.innerHTML = `
        <div class="nr-api">
            <img src="${course.img}" alt="${course.title}" onerror="this.onerror=null;this.src='placeholder.jpg';">
            <h3>${course.title}</h3>
            <p>${course.introduction}</p>
            <a href="${course.url}" target="_blank">点击了解</a>
            </div>
        `;
        container.appendChild(courseElement);
    });
}

async function fetchAndDisplayCourses() {
    const courses = await fetchCourses();
    const randomCourses = getRandomCourses(courses);
    displayCourses(randomCourses);
}

// Initial fetch and display
fetchAndDisplayCourses();



/* 视频 */

document.getElementById('playVideo').addEventListener('click', function(e) {
    e.preventDefault();
    document.getElementById('videoOverlay').classList.add('active');
    document.getElementById('videoPlayer').play();
});

document.getElementById('closeBtn').addEventListener('click', function() {
    document.getElementById('videoOverlay').classList.remove('active');
    document.getElementById('videoPlayer').pause();
});